import React, { useState } from "react"
import NavTop from "./NavTop"
import "./Comment.scss"
import { TextArea, Toast } from "antd-mobile"
import { useDispatch } from "react-redux"
import { pubilshArticle } from "../store/actions"
function Comment({ articleId, closeModel }) {
  const dispatch = useDispatch()
  const [value, setValue] = useState("")

  const hangleChange = (value) => {
    setValue(value)
  }

  const publishArticle = () => {
    dispatch(pubilshArticle(articleId, value))
    Toast.show({
      icon: "success",
      content: "评论成功"
    })
    closeModel()
  }
  return (
    <div>
      <NavTop title="评论文章">
        <div className="publish" onClick={publishArticle}>
          发表
        </div>
      </NavTop>
      <div className="commentActive">
        <TextArea
          placeholder="说点什么~"
          value={value}
          onChange={hangleChange}
        ></TextArea>
      </div>
    </div>
  )
}

export default Comment
